﻿
<script lang="ts" setup>
import { ref,reactive } from 'vue'
 import { onRegisteSubmitService,onLoginSubmitService } from '@/api/login.js'; //导入自定义函数
 //import rules from '@/utils/loginValidate.js';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

interface RuleForm{
  userName: '',
  password: '',
  gender: '',
  email: '',
}

const onSubmit = () => {
  console.log('submit!')
}

const src =
  'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg';

  const isRegisteFlag = ref(false);

  //性别
  const genderOptions = ref([{label:'男', key:'1', value:'男'},{label:'女', key:'0', value:'女'}]);

  //登陆跳转注册按钮事件
  function loginToRegister(){
      isRegisteFlag.value = true;
      resetForm(ruleFormRef);
  }

  //注册也返回登录页事件
  function registerToLogin(){
      isRegisteFlag.value = false;
      resetForm(ruleFormRef);
  }

  const form = reactive<RuleForm>({
  userName: '',
  password: '',
  gender: '',
  email: '',
});

const ruleFormRef = ref<FormInstance>();
  //校验
  const rules = reactive<FormRules<RuleForm>>({
  userName: [
    { required: true, message: '用户名必填', trigger: 'blur' },
    { min: 2, max: 100, message: '用户名长度必须在2 到 100之间', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '密码必填',
      trigger: 'change',
    },{ min: 6, max: 10, message: '密码长度必须在6 到 10之间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/^[^\u4e00-\u9fa5 ]{6,16}$/.test(value)) {
          callback(new Error('密码不能包含中文'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
  gender: [
    {
      required: true,
      message: '性别必填',
      trigger: 'change',
    },
  ],
  email: [
    {
      required: true,
      message: '邮箱必填',
      trigger: 'change',
    },
    {
  validator: (rule, value, callback) => {
    if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
      callback(new Error('邮箱格式不正确。'));
    } else {
      callback();
    }
  },
  trigger: 'blur',
},
  ],
});

  const loginRules = reactive<FormRules<RuleForm>>({
  userName: [
    { required: true, message: '用户名必填', trigger: 'blur' },
    { min: 2, max: 100, message: '用户名长度必须在2 到 100之间', trigger: 'blur' },
  ],
  password: [
    {
      required: true,
      message: '密码必填',
      trigger: 'change',
    },{ min: 6, max: 10, message: '密码长度必须在6 到 10之间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (!/^[^\u4e00-\u9fa5 ]{6,16}$/.test(value)) {
          callback(new Error('密码不能包含中文'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
});

//注册页注册按钮
const onRegiste = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate( (valid, fields) => {
    if (valid) {
        onRegisteSubmitService(form);

    } else {
      console.log('error submit!', fields)
    }
  })
};


const onLogin = async function(form){
    if((form.userName === undefined || form.password === undefined) || (form.userName === "" || form.password === "") ){
        alert("请填写用户名和密码。")
    }else{
        await onLoginSubmitService(form);
    }
    
}
      

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>



<template>
    <div class="common-layout" v-show="isRegisteFlag">
        <el-container class="el-container">
            <el-aside width="500px" class="el-aside">
                <div class="demo-image__placeholder">
                    <div class="block">
                        <el-image :src="src" />
                    </div>

                </div>
            </el-aside>
            <el-main class="el-main">
                <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px" class="user-form">
                    <el-form-item>
                        <h1>注册</h1>
                    </el-form-item>
                    <el-form-item label="用户名： " class="user-input" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入用户名" />
                    </el-form-item>
                    <el-form-item label="密  码：" class="user-input" type="password" prop="password">
                        <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
                    </el-form-item>
                    <el-form-item label="性 别：" class="user-input" prop="gender">
                        <el-select v-model="form.gender"
                                   placeholder="请选择性别"
                                   style="width: 240px">
                            <el-option v-for="gender in genderOptions"
                                       :key="gender.key"
                                       :label="gender.label"
                                       :value="gender.value" />
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="邮 箱：" class="user-input" placeholder="请输入邮箱" prop="email">
                        <el-input v-model="form.email" />
                    </el-form-item>
                    <el-form-item class="button-container">
                        <el-button type="primary" @click="onRegiste(ruleFormRef)" class="button-regist">注册</el-button>
                        <el-button class="button-return" @click="registerToLogin">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>

    <!--登录-->
    <div class="common-layout" v-if="!isRegisteFlag">
        <el-container class="el-container">
            <el-main class="el-main">
                <el-form :model="form"  label-width="auto" style="max-width: 600px" class="user-form">
                    <el-form-item>
                        <h1>登录</h1>
                    </el-form-item>
                    <el-form-item label="用户名： " class="user-input" prop="userName">
                        <el-input v-model="form.userName" placeholder="请输入用户名"/>
                    </el-form-item>
                    <el-form-item label="密 码：" class="user-input" prop="password">
                        <el-input v-model="form.password"  type="password" placeholder="请输入密码" show-password/>
                    </el-form-item>
                    <el-form-item class="button-container">
                        <el-button type="primary" @click="onLogin(form)" class="button-regist">登录</el-button>
                        <el-button class="button-return" @click="loginToRegister">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>


<style scoped>

    .demo-image__placeholder .block{
        opacity: 0.6;
    }
    .common-layout{
        padding-left:100px;
    }
    .user-input{
        width:300px;
    }
    .user-form{
        padding-top: 40px;
    }
    .el-container{
    }
    .el-aside {
        border-radius: 20px;
        border: 2px solid rgb(243, 235, 235);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .el-main {
        background: #FFFFFF;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

   
</style>